<template>
  <div class="container">
    <div class="content">
      <div style="text-align: right">
        摸板名称：
        <el-input
          v-model.trim="templateName"
          placeholder="摸板名称"
          style="width: 300px"
          size="small"
        ></el-input>
        <el-button
          style="margin-left: 10px"
          type="success"
          icon="el-icon-check"
          size="small"
          @click="save"
        >
          保存
        </el-button>
      </div>
      <!--      设置摸板-->
      <el-timeline>
        <el-timeline-item
          v-for="(task,index) in tasks"
          :key="index"
          placement="top"
        >
          <el-card>
            <h4>
              <span
                v-if="index===0"
                style="margin-right: 145px"
              >{{ task.taskNodeName }}</span>
              <el-input
                placeholder="请输入审批名称"
                v-model="task.taskNodeName"
                style="width: 200px"
                size="small"
                v-else
              ></el-input>
              <el-tooltip
                effect="dark"
                content="删除流程节点"
                placement="top"
              >
                <el-button
                  @click="remove(index)"
                  :disabled="index===0"
                  style="margin-left: 50px"
                  circle
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                ></el-button>
              </el-tooltip>
            </h4>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div style="text-align: right">
        <el-button
          type="success"
          icon="el-icon-delete"
          size="small"
          @click="add"
        >
          添加流程节点
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AddTemplate',
    data () {
      return {
        templateName: '',
        tasks: [
          {
            taskNodeName: '提交审批'
          },
          {
            taskNodeName: ''
          }
        ]
      }
    },
    async created () {
      if (this.$route.params.id) {
        const { data } = await this.$service.gzl.getTemplate(this.$route.params.id)
        this.templateName = data.data.templateName
        this.tasks = data.data.tasks
      }
    },
    methods: {
      add () {
        this.tasks.push({
          taskNodeName: ''
        })
      },
      remove (index) {
        this.tasks.splice(index, 1)
      },
      async save () {
        if (!this.templateName) {
          this.$message.error('请填写摸板名称')
          return
        }
        if (this.tasks.length < 2) {
          this.$message.error('摸板最少应有"两级"审批')
          return
        }
        this.tasks.forEach((item, index) => {
          const { taskNodeName } = item
          if (!taskNodeName) {
            this.$message.error(`第"${index + 1}"级审批没有设置审批名称`)
            throw new Error('break')
          }
        })
        const params = {
          templateName: this.templateName,
          tasks: this.tasks.map((item, index) => {
            return { ...item, childIndex: index }
          })
        }
        if (this.$route.params.id) {
          params.id = this.$route.params.id
          await this.$service.gzl.editFlowTemplate(params)
          this.$message.success('摸板编辑成功')
        } else {
          await this.$service.gzl.addFlowTemplate(params)
          this.$message.success('摸板添加成功')
        }

        this.$closeCurrentGoEdit('/approval/TemplateList')
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 20px;
  }

  .content {
    max-width: 900px;
    padding: 20px 0;
  }
</style>
